<!-- 这个是video播放器组件  -->
<script setup>
import {ref,onMounted,onBeforeUnmount,defineProps} from "vue"

import yin_white from "../../public/video/yin_white.svg"
import jingyin_white from "../../public/video/jingyin_white.svg"
import pause_white from "../../public/video/pause_white.svg"
import play_white from "../../public/video/play_white.svg"

//视频元素获取
const videoRef = ref(null)
//进度条元素获取
const pressBoxRef = ref(null)
const pressRef = ref(null)

const videoMutedImage = ref(jingyin_white)

//video主要播放文件
const videoMaster = ref("")
//是否是第一次加载
// const isSetup = ref(true) 
//时间
const videoTimeNow = ref(0)
const videoTimeAll = ref(0)

//挂载后
onMounted(()=>{})
//组件销毁前
onBeforeUnmount(()=>{})
//子组件拿到父组件传递过来的值
const props = defineProps({
    videoUrl:{type:String},
    borderRadius:{type:String},
    isSetup:{type:Boolean}
})

//视频静音按钮
const isMuted = ref(true) //是否是静音的
const mutedBtn = () => {
    if(isMuted.value){
        //静音状态，点击就是有声音
        videoRef.value.muted = false
        isMuted.value = false
        videoMutedImage.value = yin_white
    }else{
        videoRef.value.muted = true
        isMuted.value = true
        videoMutedImage.value = jingyin_white
    }
}

//视频点击播放和暂停按键事件
const videoMiniPlayImage = ref(pause_white) //mini的播放暂停
const playerBtn = () => {
    if(videoRef.value.paused){
        videoRef.value.play()
        videoMiniPlayImage.value = pause_white
    }else{
        videoRef.value.pause()
        videoMiniPlayImage.value = play_white
    }
}

//视频播放时每一事件更新事件
const videoTimeUpdate = async() => {
    // console.log(event)
    videoTimeNow.value = TimeJiSuan(videoRef.value.currentTime)
    pressRef.value.style.width = await videoRef.value.currentTime/videoRef.value.duration*100 + '%'
}

//进度条点击事件
const videowucha = 200 //进度条误差
const videoMouseDown = (event) => {
    // console.log(event.pageX)
    let len = event.pageX - pressBoxRef.value.offsetLeft - videowucha
    let percent = len / pressBoxRef.value.offsetWidth;
    pressRef.value.style.width = percent * (pressBoxRef.value.offsetWidth) - 2 + "px";
    videoRef.value.currentTime = percent * videoRef.value.duration;
}

//时间换算
const TimeJiSuan = (time) => {
    let h,m,s
    if(time >= 60*60*60){
        h = time / 60 / 60^0 //^0:四舍五入整数化
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return h + ':' + m + ':' + s
    }else if(time >= 0 && time <60*60*60){
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return m + ':' + s
    }else{
        return "出错了"
    }
}
const videoCanPlay = () => {
    // videoTimeNow.value = TimeJiSuan(0)
    videoTimeAll.value = TimeJiSuan(videoRef.value.duration)
}
const videoPlaying = () => {

}
//视频移入移出事件
const func1Ref = ref(null)
const videoMoveIn = (event) => {
    // console.log("鼠标移入")
    func1Ref.value.style.display = "block"
}
const videoMoveOut = (event) => {
    // console.log("鼠标移出")
    func1Ref.value.style.display = "none"
}
</script>

<template>
    <div class="videoAllClass" :style="{borderRadius:props.borderRadius}"
    @mouseenter="videoMoveIn" @mouseleave="videoMoveOut">
        <video :src="props.videoUrl" autoplay muted v-if="props.isSetup" 
        ref="videoRef"
        @click="playerBtn" @timeupdate="videoTimeUpdate"
        @canplay="videoCanPlay()" @playing="videoPlaying()"
        :style="{borderRadius:props.borderRadius}" ></video>
        <video :src="videoMaster" autoplay muted v-else 
        ref="videoRef"
        @click="playerBtn" @timeupdate="videoTimeUpdate"
        @canplay="videoCanPlay()" @playing="videoPlaying()"
        :style="{borderRadius:props.borderRadius}"></video>
        <div class="func1Box" ref="func1Ref">
            <div class="pressBox" ref="pressBoxRef" @mousedown="videoMouseDown">
                <div class="press" ref="pressRef"></div>
            </div>
            <div class="videoMutedBox">
                <img :src="videoMutedImage" alt="" @click="mutedBtn"/>
            </div>
            <div class="miniplayShow">
                <img :src="videoMiniPlayImage" alt="" @click="playerBtn" />
            </div>
            <div class="miniplayTimeShow">
                <span>{{ videoTimeNow }} / {{ videoTimeAll }}</span>
            </div>
        </div>
    </div>
    
</template>

<style scoped>
.videoAllClass{
    width: 100%;
    height: 100%;
    background: #000;
}
.videoAllClass video{
    width: 100%;
    height: 100%;
}
/**功能样式 */
.func1Box{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 12%;
    display: none;
}

/**进度条 */
.pressBox{
    position: absolute;
    left: 1%;
    width: 97%;
    height: 5%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    border-radius: 10px;
}
.press{
    position: absolute;
    left: 0;
    top: 0;
    /* width: 100%; */
    height: 100%;
    background-color: skyblue;
    border-radius: 10px;
}

/**静音样式 */
.videoMutedBox{
    position: absolute;
    right: 2%;
    bottom: 10%;
    width: 5%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
}
.videoMutedBox img{
    width: 40%;
    height: 40%;
    cursor: pointer;
    user-select: none;
}

/**消息播放暂停样式 */
.miniplayShow{
    position: absolute;
    left: 2%;
    bottom: 10%;
    width: 5%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.miniplayShow img{
    width: 40%;
    height: 40%;
    cursor: pointer;
    user-select: none;
}
.miniplayTimeShow{
    position: absolute;
    left: 8%;
    bottom: -12%;
    width: 20%;
    height: 80%;
}
.miniplayTimeShow span{
    color: #fff;
    font-size: 0.5rem;
}
</style>